<template>
  <div class="container">
    <el-menu
      :uniqueOpened="true"
      router
      class="el-menu-vertical-demo"
      background-color="#001529"
      :collapse="collapse"
      :defaultActive="menuState.defaultActive"
      :default-openeds="menuState.defaultOpens"
      active-text-color="#ffd04b"
      :collapse-transition="false"
    >
      <template v-for="(item ,index) in menuList" :key="index">
        <el-menu-item
          v-if="item.children.length === 1 && !item.children[0].meta.isDirectory"
          :index="item.children[0].path"
        >
          <i v-if="item.children[0].meta.icon" :class="['fa',item.children[0].meta.icon]"></i>
          <span>{{$t(`message.menus.${item.children[0].meta.lang}`)}}</span>
        </el-menu-item>
        <Submenus
          v-else
          :menu-data="item"
        >
        </Submenus>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, computed} from "vue";
import {useStore} from 'vuex'
import Submenus from "@/components/main/components/menus/Submenus.vue";
export default defineComponent({
  name: "Menus",
  props: {
    menuList: {
      type: Array,
      default: [],
    }
  },
  components: {
    Submenus
  },
  setup() {
    const store = useStore()
    let collapse = computed(() => {
      return store.state.app.collapse
    })
    let state = reactive({
      menuState: store.state.app.menuState,
    })
    return {
      ...state,
      collapse
    }
  },
})
</script>

<style lang="scss" scoped>
  .el-menu-vertical-demo{
    border: 0;
  }
  .el-submenu__title span, .el-submenu__title i{
    color: #dbdbdb;
  }
  .el-menu li, .el-menu i{
    color: #dbdbdb;
  }
  .el-menu i, .el-submenu__title i{
    margin-right: 0.4rem;
  }
  .el-menu li:hover, .el-submenu__title:hover span,{
    color: #fff;
  }
</style>
